<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

	<title>Nested Layouts</title> 

	<link type="text/css" rel="stylesheet" href="layout2.css" />

	<style type="text/css"> 

	/* customize the borders to avoid double-borders */
	.ui-layout-pane {
		border:			0; /* override layout-default-latest.css */
		border-top:		1px solid #BBB;
		border-bottom:	1px solid #BBB;
	}
	.ui-layout-pane-north ,
	.ui-layout-pane-south {
		border:			1px solid #BBB;
		overflow:		hidden;
	}
	.ui-layout-pane-west ,
	.ui-layout-pane-east {
	} 
	.ui-layout-pane-center	{
		border-left:	0;
		border-right:	0;
		} 
		.inner-center {
			border:		1px solid #BBB;
		}

	/* add shading to outer sidebar-panes */
	.outer-west ,
	.outer-east {
		background-color: #EEE;
	}
	.middle-west ,
	.middle-east {
		background-color: #F8F8F8;
	}

	/* remove padding & scrolling from panes that are 'containers' for nested layouts */ 
	.outer-center ,
	.middle-center {
		border:			0; /* cosmetic */
		padding:		0; 
		overflow:		hidden;
	}

	/*
	 *	customize borders on panes/resizers to make pretty
	 */
	.ui-layout-pane-west		{ border-right:		0; } 
	.ui-layout-resizer-west		{ border-left:		1px solid #BBB; }
	.ui-layout-pane-east		{ border-left:		0; } 
	.ui-layout-resizer-east		{ border-right:		1px solid #BBB; }
	.ui-layout-pane-north		{ border-bottom:	0; }
	.ui-layout-resizer-north	{ border-top:		1px solid #BBB; }
	.ui-layout-pane-south		{ border-top:		0; }
	.ui-layout-resizer-south	{ border-bottom: 	1px solid #BBB; }
	/*
	 *	add borders to resizers when pane is 'closed'
	 *
	 *.ui-layout-resizer-closed	{ border:			1px solid #BBB; }
	 */
	/* 
	 *	show both borders when the resizer is 'dragging' 
	 */
	.ui-layout-resizer-west-dragging ,
	.ui-layout-resizer-east-dragging {
		border-left:		1px solid #BBB;
		border-right:		1px solid #BBB;
	}
	.ui-layout-resizer-north-dragging ,
	.ui-layout-resizer-south-dragging {
		border-top:		1px solid #BBB;
		border-bottom:	1px solid #BBB;
	}

	</style> 

	<script type="text/javascript" src="jquery.js"></script> 
	<script type="text/javascript" src="jquery-ui.js"></script> 
	<script type="text/javascript" src="jquery-layout.js"></script> 

	<script> 

	var outerLayout, middleLayout, innerLayout; 

	$(document).ready(function () { 

		outerLayout = $('body').layout({ 
			center__paneSelector:	".outer-center" 
		,	west__paneSelector:		".outer-west" 
		,	east__paneSelector:		".outer-east" 
		,	west__size:				125 
		,	east__size:				125 
		,	spacing_open:			8 // ALL panes
		,	spacing_closed:			12 // ALL panes
		//,	north__spacing_open:	0
		//,	south__spacing_open:	0
		,	north__maxSize:			200
		,	south__maxSize:			200
               
                ,   center__onresize: function (name, el, state, opts, Layout) { 
                          
                           console.log("state.innerWidth1: "+ state.innerWidth); 
                         
                        }
                
		}); 

		middleLayout = $('div.outer-center').layout({ 
			center__paneSelector:	".middle-center" 
		,	west__paneSelector:		".middle-west" 
		,	east__paneSelector:		".middle-east" 
		,	west__size:				100 
		,	east__size:				100 
		,	spacing_open:			8  // ALL panes
		,	spacing_closed:			12 // ALL panes
                
                    
                
		}); 

		innerLayout = $('div.middle-center').layout({ 
			center__paneSelector:	".inner-center" 
		,	west__paneSelector:		".inner-west" 
		,	east__paneSelector:		".inner-east" 
		,	west__size:				75 
		,	east__size:				75 
		,	spacing_open:			8  // ALL panes
		,	spacing_closed:			8  // ALL panes
		,	west__spacing_closed:	12
		,	east__spacing_closed:	12
                
                ,   center__onresize: function (name, el, state, opts, Layout) { 
                          
                           console.log("state.innerWidth3: "+ state.innerWidth); 
                         
                        }
                
		}); 

	}); 


	</script> 


</head> 
<body> 

<div class="outer-center">

	<div class="middle-center">

		<div class="inner-center">Inner Center</div> 
		<div class="inner-west">Inner West</div> 
		<div class="inner-east">Inner East</div>
		<div class="ui-layout-north">Inner North</div> 
		<div class="ui-layout-south">Inner South</div> 

	</div> 
	<div class="middle-west">Middle West</div> 
	<div class="middle-east">Middle East</div> 
	
               


</div> 

<div class="outer-west">Outer West</div> 
<div class="outer-east">Outer East</div> 

<div class="ui-layout-north">Outer North</div> 
<div class="ui-layout-south">Outer South</div> 

</body> 
</html> 


